<template>
  <div>
    <Header></Header>
    <h4>视频播放</h4>
    <div style="text-align: center">
     <video width="60%" :src="'http://127.0.0.1:8000'+video_url+'?sid='+this.sid+'&token='+this.token" controls autoplay>
        您的浏览器不支持 video 标签。
      </video><br>
      <button @click="go"><b>返回详情页</b></button>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from '@/components/Header'
  import Footer from '@/components/Footer'

  export default {
    name: "Section",
    components: {Header, Footer},
    data() {
      return {
        sid: '',  // 小节id  ->  章  ->  课程
        uid: localStorage.uid,  // 用户id
        video_url: '', // 播放地址
        cid:'',
        token:""
      }
    },
    created() {
      this.sid = this.$route.query.sid
      this.get_video_url()
      this.token=localStorage.token
    },
    methods: {
      get_video_url() {  // 不传uid, 因为后端 认证用户在request.user 可以取到user
        this.axios.post('/user_course_section/', {sid: this.sid}).then(res => {
            console.log(res.data)
          // {'code': 0, 'msg': '成功', 'video_url': section.video.url}
          this.video_url = res.data.video_url
          this.cid=res.data.cid
        })
      },
      go(){
        location.href='/courses/detail/?cid='+this.cid
    }
    },
    
  }
</script>

<style scoped>

</style>